<template>
  <a-form-model
    ref="formComp"
    :model="formData"
    layout="horizontal"
    :rules="rules"
    class="AsteriskAfter newEditStyle rightDrawerWithoutCol"
  >
    <a-row :gutter="24">
      <a-col :md="12" :sm="24">
        <a-form-model-item label="车型" prop="modelCode">
          <car-model-code-select
            :query="{ time: instantUpdateTime, selectAll: false }"
            :has-all="false"
            placeholder="请输入车型搜索"
            v-model="formData.modelCode"
            @change="getEcuNameListByCarModel"
          ></car-model-code-select>
        </a-form-model-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="ECU名称" prop="ecuName">
          <a-select
            ref="ecuNameSelect"
            v-model="formData.ecuName"
            show-search
            placeholder="请输入ECU名称搜索"
            :disabled="isDisabledEcuName"
            @change="getEcuIDListByEcuName"
          >
            <a-select-option v-for="(item, index) in ecuNameList" :key="index" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :md="12" :sm="24">
        <a-form-model-item label="ECUID" prop="ecuId">
          <!-- <ecu-id-select v-model="formData.ecuId" @change="refreshData()"></ecu-id-select> -->
          <a-select v-model="formData.ecuId" show-search placeholder="请输入ECUID搜索" :disabled="isDisabledEcuId">
            <a-select-option v-for="(item, index) in ecuIdList" :key="index" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="DLL文件类名" prop="dllType">
          <a-select
            placeholder="请输入DLL文件类名搜索"
            v-model="formData.dllType"
            showSearch
            :filterOption="$commonFun.filterOption"
          >
            <a-select-option v-for="item in dllTypeArr" :key="item.code">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-col :md="24" :sm="24">
      <!-- 软件包地址 -->
      <a-form-model-item prop="svnPath">
        <template slot="label">
          软件包地址
          <question-mark-tip
            tip-title="当前软件包为受控且可支持OTA云端升级的软件包地址，且创建人具备SVN权限"
            :popupContainer="$commonFun.getPopupContainer"
          ></question-mark-tip>
        </template>
        <custom-text-area
          @change="handlerChangeArea('svnPath', $event)"
          :val="formData.svnPath"
          :max-len="500"
          style="width: 100%"
        ></custom-text-area>
      </a-form-model-item>
    </a-col>
  </a-form-model>
</template>
<script>
import CarModelCodeSelect from '@/views/components/CarModelCodeSelect'
import EcuIdSelect from '@/views/components/EcuIdSelect.vue'
import { mapState } from 'vuex'
import { axios } from '@/utils/request'
import CustomTextArea from '@/components/CustomTextArea/index.vue'
import { checkVersionNameWithOutV, checkTextLen } from '@/utils/validate'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import ecuApi from '@/api/modules/system/ecuMana'
export default {
  name: 'VersionFile',
  components: {
    CarModelCodeSelect,
    EcuIdSelect,
    CustomTextArea,
    QuestionMarkTip,
  },
  props: {},
  computed: {
    ...mapState({
      instantUpdateTime: (state) => state.app.instantUpdateTime,
    }),
  },
  data() {
    return {
      formData: {
        svnPath: '',
      },
      ecuNameList: [],
      //ECUID
      ecuIdList: [],
      //DLL文件类名查询
      dllTypeArr: [],
      rules: {
        modelCode: [{ required: true, message: this.$t('pleaseInput') }],
        ecuName: [{ required: true, message: this.$t('pleaseInput') }],
        ecuId: [{ required: true, message: this.$t('pleaseInput') }],
        dllType: [{ required: true, message: this.$t('pleaseInput') }],
        svnPath: [{ required: true, message: this.$t('pleaseInput') }, { validator: checkTextLen(500, true) }],
      },
      isDisabledEcuName: true,
      isDisabledEcuId: true,
      publicNeedFilterList: [],
      // 初始化变量
      formData: {
        modelCode: undefined,
        ecuName: undefined,
        ecuId: undefined,
        dllType: undefined,
        svnPath: undefined,
      },
    }
  },
  watch: {},
  created() {
    this.getDllNameArr()
  },
  mounted() {},
  methods: {
    // 获取烧写文件类名字典，过滤自己实现
    getDllNameArr() {
      let dictCode = 'sw_repo_dll_name'
      axios({
        url: '/sw-repository/apply/drop-down-box/' + dictCode,
        method: 'get',
      }).then((res) => {
        this.dllTypeArr = res.data
      })
    },
    handlerChangeArea(key, val) {
      console.log(val)
      this.formData[key] = val
    },
    //根据车型 得到对应的ecu名称列表
    getEcuNameListByCarModel(val) {
      this.ecuNameList = []
      this.ecuIdList = []
      this.isDisabledEcuId = true
      this.formData.ecuName = undefined
      this.formData.ecuId = undefined
      if (val) {
        ecuApi.getEcuListByModelCode({ code: val }).then((res) => {
          this.publicNeedFilterList = res.data
          res.data.forEach((item) => {
            this.ecuNameList.push(item.name)
          })
          this.ecuNameList = [...new Set(this.ecuNameList)]
        })
        this.isDisabledEcuName = false
      } else {
        this.isDisabledEcuName = true
      }
    },
    //根据ECU名称 得到对应的ECUID列表
    getEcuIDListByEcuName(val) {
      this.formData.ecuId = undefined
      this.ecuIdList = []
      if (val) {
        this.publicNeedFilterList
          .filter((item) => {
            return item.name === val
          })
          .forEach((item) => {
            this.ecuIdList.push(item.ecuModuleId)
          })
        this.isDisabledEcuId = false
      } else {
        this.isDisabledEcuId = true
      }
    },
    getFormData() {
      return new Promise((resolve, reject) => {
        const data = this.formData
        console.log(data)
        this.$refs.formComp.validate((valid) => {
          if (!valid) {
            reject(valid)
            return
          }
          resolve(data)
        })
      })
    },
  },
}
</script>
<style lang="less" scoped>
</style>